<template>
  <div class="an-upload-img">
    <div class="an-upload-bg an-img" v-for="(item,index) in list" :key="index">
      <el-image :src="item" fit="fill" style="width: 100px; height: 100px" @click="clickImg(item)"></el-image>
      <div class="an-close-ico" @click.stop="deleteImg(index)">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="an-upload-bg an-plus-box" @click="clickImgAdd" v-if="list.length<number">
      <i class="el-icon-plus an-plus"></i>
    </div>
  </div>
  <dialog-uplaod v-if="isVisible" v-model:isVisible="isVisible" @call-back="callBackImg" />
  <dialog-img-scoped v-if="isVisibleScoped" v-model:isVisible="isVisibleScoped" :url="scopedUrl" />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import dialogUplaod from "./dialogUplaod.vue";
import dialogImgScoped from "./dialogImgScoped.vue";
@Options({
  components: { dialogUplaod, dialogImgScoped },
  props: {
    url: {
      type: Array,
      default: () => [],
    },
    number: {
      // 图片上传最大数量
      type: Number,
      default: 1,
    },
  },
  watch: {
    list: {
      handler(nd) {
        this.$emit("update:url", nd);
      },
      deep: true,
    },
  },
  emits: ["update:url"],
})
export default class UplaodImg extends Vue {
  [x: string]: any;
  isVisible: Boolean = false;
  isVisibleScoped: Boolean = false;
  scopedUrl: string = "";
  list: Array<string> = this.url;

  // 点击预览图片
  clickImg(url: string) {
    this.scopedUrl = url;
    this.isVisibleScoped = true;
  }

  // 删除图片
  deleteImg(index: number) {
    this.list.splice(index, 1);
  }

  // 点击上传
  clickImgAdd() {
    this.isVisible = true;
  }

  // 上传回调
  callBackImg(url: string) {
    if (url) {
      this.list.push(url);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
.an-upload-img {
  display: flex;
  margin: -5px;
}
.an-upload-bg {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px dashed #c0ccda;
  background-color: #fbfdff;
  border-radius: 4px;
  cursor: pointer;
  &.an-img {
    border: 1px solid #c0ccda;
    background: transparent;
    position: relative;
  }
  &.an-plus-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .an-plus {
      color: #dedede;
      font-size: 24px;
    }
  }
}
</style>